<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>13作业-购物车(闭包)</title>
</head>
<style>
    *{
        margin: 0;
        padding: 0;
        list-style: none;
    }
    .clearfix:after{
        display: block;
        content:"";
        clear:both;
    }
    #box{
        width: 900px;
        height: 550px;
    }
    #box li ul li{
        float: left;
    }
    img{
        width: 100px;
    }
    #head li{
        width: 200px;
        height: 30px;
        background-color: #ff6d66;
        border: 1px solid red;
        line-height: 30px;
        text-align: center;
    }
    .list li{
        width: 200px;
        height: 100px;
        border: 1px solid red;
        line-height: 100px;
        text-align: center;
    }
    p{
        display: inline-block;
    }
    .num{
        width: 50px;
        height: 20px;
        border: 1px solid gainsboro;
        color: red;
        line-height: 20px;
    }
    .rd,.ad{
        width: 22px;
        height: 22px;
        background-color: gainsboro;
        line-height: 22px;
        cursor: pointer;
    }
    #footer{
        width: 808px;
        height: 50px;
        margin-top: 10px;
        background-color: #ff6d66;
        line-height: 50px;
        text-align: right;
    }
    #footer p{
        margin: 0 50px;
    }
    #footer span{
        color: gold;
        font-size: 20px;
    }
</style>
<body>
    <ul id="box">
        <li id="head">
            <ul>
                <li>商品</li>
                <li>单价</li>
                <li>数量</li>
                <li>小计</li>
            </ul>
        </li>
        <li class="list">
            <ul class="clearfix">
                <li><img src="images/shop1.jpg"></li>
                <li class="price">8</li>
                <li>
                    <p class="rd">-</p><p class="num">0</p><p class="ad">+</p>
                </li>
                <li class="sum">0</li>
            </ul>
        </li>
        <li class="list">
            <ul class="clearfix">
                <li><img src="images/shop2.jpg"></li>
                <li class="price">10</li>
                <li>
                    <p class="rd">-</p><p class="num">0</p><p class="ad">+</p>
                </li>
                <li class="sum">0</li>
            </ul>
        </li>
        <li class="list">
            <ul class="clearfix">
                <li><img src="images/shop3.jpg"></li>
                <li class="price">12.5</li>
                <li>
                    <p class="rd">-</p><p class="num">0</p><p class="ad">+</p>
                </li>
                <li class="sum">0</li>
            </ul>
        </li>
        <li class="list">
            <ul class="clearfix">
                <li><img src="images/shop4.jpg"></li>
                <li class="price">13</li>
                <li>
                    <p class="rd">-</p><p class="num">0</p><p class="ad">+</p>
                </li>
                <li class="sum">0</li>
            </ul>
        </li>
        <li id="footer">
            <p>已选中商品<span id="sum-num">0</span>个</p>
            <p>合计费用<span id="sum-price">0</span>￥</p>
        </li>
    </ul>
</body>
<script>
    var onum = document.getElementsByClassName("num"),
        oad = document.getElementsByClassName("ad"),
        ord = document.getElementsByClassName("rd"),
        oprice = document.getElementsByClassName("price"),
        osum = document.getElementsByClassName("sum"),
        osumNum = document.getElementById("sum-num"),
        osumPrice = document.getElementById("sum-price");
    var length = onum.length;
    var arrNum =[],
        arrPrice =[];
    for (i=0;i<length;i++) {
        arrNum[i]=0;
        arrPrice[i]=0;
        (function(i){
            ord[i].onclick = function () {
                arrNum[i]--;
                if (arrNum[i]<0){arrNum[i]=0};
                totle(i)
            }
            oad[i].onclick = function () {
                arrNum[i]++;
                totle(i)
            }
        })(i)
    }
    function ad(i) {
        arrNum[i]++;
        totle(i)
    }
    function rd(i) {
        arrNum[i]--;
        if (arrNum[i]<0){arrNum[i]=0};
        totle(i)
    }
    function totle(i) {
        onum[i].innerHTML = arrNum[i];
        arrPrice[i]=osum[i].innerHTML = arrNum[i]*oprice[i].innerHTML;
        var s=0;
        var p=0;
        for (j=0;j<length;j++){
            s+=arrNum[j];
            p+=arrPrice[j];
        }
        osumNum.innerHTML=s;
        osumPrice.innerHTML=p;
    }
</script>
</html>